//小区工地计划
<template>
  <div class="con" v-loading="loading"
       element-loading-background="rgba(0, 0, 0, 0.1)">
    <div class="workmanship" v-if="!isShowSet">
      <div class="workmanship_tit">
        <span>{{ form.title }}<i></i></span>
      </div>
      <vue-seamless-scroll
          :data="form.datalist"
          class="workmanship_con"
          :class-option="classOption"
      >
        <ul class="item">
          <li v-for="(item, index) in form.datalist" :key="index">
            <p>
              <span>{{ item.num }}</span
              >{{ item.name }}
            </p>
            <el-progress
                :text-inside="true"
                :stroke-width="21"
                :percentage="item.percentage"
            ></el-progress>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
    <div class="workmanship editBox" v-else>
      <span @click="dialogVisible = true">编辑</span>
    </div>
    <!-- 弹框 -->
    <el-dialog title="栏目设置" v-loading="loading"
               :close-on-click-modal="false"
               :visible.sync="dialogVisible" id="dialogBox">
      <el-form ref="form" :model="saveFrom" label-width="100px">
        <el-form-item label="栏目标题：">
          <el-input v-model="saveFrom.title" class="inputDiv"></el-input>
        </el-form-item>
        <!-- 固定值 -->
        <el-form-item label="数据设置">
          <div class="mb10" v-for="(item, index) in saveFrom.datalist" :key="index">
            <el-input
                v-model="item.name"
                placeholder="请输入标题"
                class="inputDiv"
            ></el-input>
            <el-input
                v-model="item.num"
                placeholder="请输入数量"
                class="inputDiv ml40"
            ></el-input>
            <i
                @click="delVariable(index)"
                class="ml10"
                style="cursor: pointer; color: #409EFF;
}"
            >删除</i
            >
          </div>
          <el-button type="text" @click="addVariable">+新增一条</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogVisible = false">取消</el-button>
        <el-button type="text" @click="submit(1)">保存继续编辑</el-button>
        <el-button type="text" @click="submit(2)">保存返回主页</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import {constructionRequest, SCREEN_CODE} from "@/utils/http/request";

export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      form: {},
      saveFrom: {},
      maxData: 100
    };
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.saveFrom = {...this.form}
      }
    }
  },
  props: ["isShowSet"],
  components: {vueSeamlessScroll},
  computed: {
    classOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created() {
    this.getData();
  },
  mounted() {
  },
  methods: {
    //获取数据
    getData() {
      this.loading = true
      constructionRequest
          .Plan({
            datatype: "null",
            screenCode: SCREEN_CODE.construction,
          })
          .then((res) => {
            if (res.code === "01") {
              this.form = {
                ...res,
              };
              let arr = []
              let max = Math.max(...res.datalist.map(item => item.num))
              for (let k of res.datalist) {
                if (k.num != 0) {
                  arr.push({
                    ...k,
                    percentage: parseInt((k.num * 1 / max) * 100),
                  });
                }
              }
              this.form.datalist = arr;
            }
          })
          .catch(() => {
          })
          .finally(() => {
            this.loading = false;
          });
    },
    submit(val) {
      this.loading = true
      constructionRequest.PlanEdit({
        ...this.saveFrom,
        screenCode: SCREEN_CODE.construction,
      }).then((res) => {
        if (res.code === "01") {
          this.$message.success(res.msg || "修改成功");
          this.getData();
          this.dialogVisible = false;
          if (val === 2) {
            this.$emit("func1", false); //向父组件传值
          }
        }
      }).catch(() => {
      })

    },
    //新增变量
    addVariable() {
      let item = {
        name: "",
        num: "",
      };
      this.saveFrom.datalist.push(item);
    },
    //删除变量
    delVariable(index) {
      this.saveFrom.datalist.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/style/base";

.con {
  width: 100%;
  height: calc(100% - 20px);
  padding-top: 10px;

  .workmanship {
    height: 100%;

    .workmanship_tit {
      background: url(../../assets/image/title_left.png) no-repeat;
      height: 40px;
      line-height: 12px;
      font-size: $font-sise32;
      font-weight: bold;
      color: #fdf0a8;
      padding-left: 8px;
      margin-bottom: 20px;

      span {
        i {
          width: 54px;
          height: 16px;
          display: inline-block;
          background: url(../../assets/image/title_left_btn.png) no-repeat;
          margin-left: 10px;
        }
      }
    }

    .workmanship_con {
      height: calc(100% - 49px);
      overflow-y: hidden;

      ul {
        li {
          color: #37b4e1;
          font-size: 21px;
          margin-top: 16px;

          p {
            margin-bottom: 4px;

            span {
              float: right;
            }
          }

          ::v-deep .el-progress-bar__inner {
            border-radius: 0 !important;
            background: #2dbcba;
          }

          ::v-deep .el-progress-bar__outer {
            border-radius: 0 !important;
          }

          ::v-deep .el-progress-bar__innerText {
            display: none;
          }

          ::v-deep .el-progress-bar__outer {
            background-color: transparent;
          }
        }
      }
    }

    &.editBox {
      background: #384768;
      border: 1px solid #67b1ea;
      color: #6ef7ff;
      font-size: 20px;
      align-items: center;
      display: flex;
      display: -webkit-flex;
      justify-content: center;

      span {
        cursor: pointer;
      }
    }
  }
}
</style>
